﻿@{
    ViewBag.Title = Resources.WebStringsWeb.WebTitle;
    Layout = "~/Views/Shared/_LayoutMobile.cshtml";
}

@section css {
    <style>
        .imgicon {
            width: 3.2rem
        }

        .mui-badge {
            font-size: 10px;
            line-height: 1.4;
            position: absolute;
            top: 2px;
            left: 100%;
            margin-left: -35px;
            padding: 1px 5px;
            color: #fff;
            background: red;
        }

        .chart {
            height: 200px;
            margin: 0px;
            padding: 0px;
        }

        h5 {
            margin-top: 30px;
            font-weight: bold;
        }

            h5:first-child {
                margin-top: 15px;
            }
        .chart_title {
            font-weight: bold;
            margin: 5px;
            padding:5px;
            border-bottom: 1px #CCCCCC solid;
        }
    </style>
}
<header class="mui-bar mui-bar-nav">
    <a href="../Home/MenuBar" class="mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title" style="color:white;">统计分析</h1>
</header>
<div class="mui-content" ng-cloak ng-controller="HomeChartsController" ng-init="
        GetPlaceCountByPark();
     GetPlaceCountByType();
     GetDeviceCountByType();
     GetUserCountByType();
     GetUserCountByOnline();
     GetMonthlyCheckChart();
     ">
    <div class="mui-content-padded">
        <div class="mui-card">
            <p class="chart_title">各园区场所分布</p>
            <div id="parkplaceview" class="chart">
            </div>
        </div>
        <div class="mui-card">
            <p class="chart_title">各类型场所分布</p>
            <div id="placetypeview" class="chart">
            </div>
        </div>
        <div class="mui-card">
            <p class="chart_title">设施设备数量</p>
            <div id="devicetypeview" class="chart">
            </div>
        </div>
        <div class="mui-card">
            <p class="chart_title">各角色用户数分布</p>
            <div id="usertypeview" class="chart">
            </div>
        </div>
        <div class="mui-card">
            <p class="chart_title">近七日用户活跃度</p>
            <div id="onlineview" class="chart">
            </div>
        </div>
        <div class="mui-card">
            <p class="chart_title">近七日检查台账完成情况</p>
            <div id="checkrecordmonthlyview" class="chart">
            </div>
        </div>
        <div style="height:40px;"></div>
    </div>

    
</div>

@section js{
    <script src="~/Assets/js/base/echart.min.js"></script>
    <script src="~/Assets/js/pg/HomeChart.js?v=@DateTime.Now.ToString("yyyyMMddHH")"></script>
    <script>


    </script>

}